:root{
	--border:2px red solid;
	--color-search:rgba(0, 7, 8, 0.4);
	--colorer-search:rgba(102, 102, 102, 0.7);
}/*全局*/

.tools{/* 工具页面主体 */
    width: 85%;
    height: 530px;
    margin: 600px 0 150px 120px ;
    padding-top: 50px;
}

.ToDoList{/*ToDoList外框*/
    width: 30%;
    height: 480px;
    margin-left: 50px;
    margin-top: 50px;
    float: left;
    overflow:auto;
    background-color: var(--color-search);
    border-radius:20px;
    box-shadow: 3px 3px 15px black;
}
.ToDoList::-webkit-scrollbar {
    display: none;
}
.ToDoList,.WhatToEat,.toolsbox{
    border-radius: 30px;
    box-shadow: 3px 3px 15px black;
}
.WhatToEat{
    width: 50%;
    height: 120px;
    margin-left: 500px;
    color: white;
    line-height: 120px;
    margin-top: 50px;
    background-color: var(--color-search);
    border-radius: 40px;
    text-align: center;
    user-select: none;
    box-shadow: 3px 3px 15px black;
}
.WhatToEat .click{
    width: 50%;
    height: 120px;
    float: left;
    cursor: pointer;
}
.WhatToEat .food{
    width: 45%;
    height: 120px;
    float: right;
    font-size: 22px;
    user-select: none;
}
.toolsbox{
    width: 50%;
    height: 60%;
    margin-top: 36px;
    margin-left: 500px;
    text-align: center;
    background-color: var(--color-search);
}
.toolsbox .toolsLeft{
    width: 49.7%;
    height: 80%;
    border-right: 2px solid white;
    float: left;
    margin-top: 5%;
}
.toolsbox .toolsRight{
    width: 49.7%;
    height: 80%;
    float: right;
    border-left: 2px solid white ;
    margin-top: 5%;
}
.toolsbox  li{
    height: 40px;
}
.toolsbox  li a{
    color: #b8b8b8 ;
    user-select: none;
}

.toolsbox  li a:hover{
    color: white;
}

#todoh1 {
    margin-top: 15px;
}
#todoh1 i{
    font-size: 35px;
    color: white;
}
form {
    height: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:50px;
}

form input,
form button {
    height: 40px;
    font-size: 15px;
    border: none;
    outline: 0;
    border-radius: 15px 0 0 15px;
    background: white;
}

form button {
    color: #fff;
    width:40px;
    background: rgba(102,102,102,0.7);
    cursor: pointer;
    border-radius: 0px 15px 15px 0px;
}
form button:hover {
    background: rgba(7,7,7,0.7);
    color: #fff;
}
select {
    outline: none;
    border:0;
    width: 100%;
    cursor: pointer;
    padding: 15px 15px;
}

.select {
    width:170px;
    margin: 10px;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}
.todo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:40px;
}

.todo-list {
    height:400px; 
    min-width: 60%;
    list-style: none;
}

.todo {
    width:100%;
    margin: 13px;
    background: #fff;
    color: #000;
    font-size: 15px;
    display: flex;
    padding-left: -10%;
    justify-content:flex-end;
    align-items: center;
    transition: all 0.6s ease;
}
.complete-btn,
.trash-btn {
    background: #ff6f47;
    color: #fff;
    border: none;
    padding: 12px 12px;
    cursor: pointer;
    font-size: 20px;
    float:right;
}
.complete-btn {
    background: rgba(44, 211, 85,0.8);
    margin-left:3px;
}

.completed {
    text-decoration: line-through;
    opacity: 0.5;
}

.fall {
    transform: translateY(4px)  rotateZ(20deg);
    opacity: 0;
}

.mode button{
    opacity: 0;
}